<template>
  <div>
    <div>
      <h2>Welcome to 梦天电商后台管理系统</h2>

      <el-carousel height="280px" indicator-position="outside" :interval="3500">
        <el-carousel-item v-for="(item, i) in imgUrl" :key="i">
          <img
            class="carouselImg"
            :src="item.url"
            :alt="item.title"
            @click="goTo(item)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      imgUrl: [
        {
          to: "/users",
          title: "用户管理",
          url: require("../assets/img/1.jpg"),
        },
        {
          to: "/roles",
          title: "权限管理",
          url: require("../assets/img/2.jpg"),
        },
        {
          to: "/goods",
          title: "商品管理",
          url: require("../assets/img/3.jpg"),
        },
        {
          to: "/orders",
          title: "订单管理",
          url: require("../assets/img/2.jpg"),
        },
        {
          to: "/reports",
          title: "数据统计",
          url: require("../assets/img/1.jpg"),
        },
      ],
    };
  },

  methods: {
    goTo(item) {
      this.$message.success("将前往" + item.title);
      setTimeout(() => {
        this.$router.push(item.to);
        console.log(this);
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  font-size: 38px;
  text-align: center;
  background: #9cecfb;
  background: -webkit-linear-gradient(to right, #0052d4, #65c7f7, #9cecfb);
  background: linear-gradient(to right, #0052d4, #65c7f7, #9cecfb);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.el-carousel {
  position: relative;
  width: 520px;

  overflow: hidden;
  // background-color: blue;
  margin: 20px auto;
  .el-carousel-item {
    width: 100%;
    height: 100%;

    .carouselImg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
